<script setup>
import { ref } from 'vue'
import { usePopStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { requireImg } from '@/utils/common'
const popStore = usePopStore()
const { Hangxian, XY } = storeToRefs(popStore)

const close = () => {
  Hangxian.value.showPop = false
}

const qxlist = [
  {
    name: '西北风',
    type: 'WN'
  },
  {
    name: '西风',
    type: 'W'
  },
  {
    name: '西南风',
    type: 'WS'
  },
  {
    name: '南风',
    type: 'S'
  },
  {
    name: '东南风',
    type: 'ES'
  },
  {
    name: '东风',
    type: 'E'
  },
  {
    name: '东北风',
    type: 'EN'
  },
  {
    name: '北风',
    type: 'N'
  }
]

let xLabels = ['2km', '4km', '6km', '8km', '10km', '12km', '14km']
// 风向图片（不同方向的 PNG 图片）
const windImages = {
  E: requireImg('qximg/东风.png'),
  W: requireImg('qximg/西风.png'),
  N: requireImg('qximg/北风.png'),
  S: requireImg('qximg/南风.png'),
  EN: requireImg('qximg/东北风.png'),
  ES: requireImg('qximg/东南风.png'),
  WN: requireImg('qximg/西北风.png'),
  WS: requireImg('qximg/西南风.png')
}

// 风向数据（X 轴索引、Y 轴位置、风向、风力）
let windPositions = [
  { x: 0, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 1, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 2, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 3, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 4, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 5, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 6, y: 50, direction: 'E', windSpeed: '5.5' },
  { x: 0, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 1, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 2, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 3, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 4, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 5, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 6, y: 150, direction: 'W', windSpeed: '6.8' },
  { x: 0, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 1, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 2, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 3, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 4, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 5, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 6, y: 250, direction: 'N', windSpeed: '7.2' },
  { x: 0, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 1, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 2, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 3, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 4, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 5, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 6, y: 350, direction: 'S', windSpeed: '6.5' },
  { x: 0, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 1, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 2, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 3, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 4, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 5, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 6, y: 450, direction: 'EN', windSpeed: '5.4' },
  { x: 0, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 1, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 2, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 3, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 4, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 5, y: 550, direction: 'ES', windSpeed: '6.2' },
  { x: 6, y: 550, direction: 'ES', windSpeed: '6.2' }
]
const optionData = {
  tooltip: {
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    trigger: 'item', // 鼠标悬停在数据项上时显示提示框
    formatter: (params) => {
      // 获取当前点的数据
      const data = windPositions.find(
        (d) => xLabels[d.x] === params.value[0] && d.y === params.value[1]
      )
      if (data) {
        let d = qxlist.filter((i) => i.type == data.direction)[0].name
        return `风向: ${d}<br>风力: ${data.windSpeed} m/s`
      }
      return ''
    }
  },
  grid: {
    left: '3%',
    right: '10%',
    bottom: '5%',
    top: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: xLabels,
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 12
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 600,
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 12
      }
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255, 255, 255, 0.2)'
      }
    } //设置网格
  },
  series: [
    // 航线
    {
      type: 'line',
      data: [50, 100, 200, 300, 400, 500, 600],
      itemStyle: { color: '#00ffff' }
    },
    // 风向符号（使用 PNG 图片）
    {
      type: 'scatter',
      data: windPositions.map((d) => [xLabels[d.x], d.y]),
      symbol: (value) => {
        let index = windPositions.findIndex((d) => xLabels[d.x] === value[0] && d.y === value[1])
        return index !== -1 ? `image://${windImages[windPositions[index].direction]}` : 'circle'
      },
      symbolSize: 20, // 控制 PNG 大小
      label: {
        show: true,
        formatter: (params) => {
          let index = windPositions.findIndex(
            (d) => xLabels[d.x] === params.value[0] && d.y === params.value[1]
          )
          return windPositions[index].windSpeed // 显示风力
        },
        position: [10, 10], // 显示在图标右侧
        color: '#fff', // 文字颜色
        fontSize: 10, // 文字大小
        offset: [10, 0] // 调整文字位置
      }
    }
  ]
}
const option = ref(optionData)
</script>
<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated  animate__fadeIn"
    leave-active-class="animate__animated animate__faster  animate__fadeOut"
  >
    <div class="AirspacePop" ref="currentDom" v-if="Hangxian.showPop">
      <p class="title">
        <span>航线气象图</span>
        <span @click="close"><img src="@img/pop/close_icon.png" alt="" /></span>
      </p>
      <div class="lenged">
        <i>高度(m)</i>
        <p v-for="(item, index) in qxlist" :key="index">
          <img :src="windImages[item.type]" alt="" />
          <span>{{ item.name }}</span>
        </p>
      </div>
      <div class="content">
        <p class="bottom">
          <span>起点</span>
          <span>终点</span>
        </p>
        <p class="distance">距离(km)</p>
        <div class="chart">
          <Charts :option="option" />
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
.AirspacePop {
  position: fixed;
  z-index: 9;
  top: 100px;
  right: 400px;
  width: 444px;
  height: 364px;
  background: url('@img/pop/device-attributes-bg.png');
  background-size: 100% 100%;

  .title {
    display: flex;
    padding: 22px 50px 0 55px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;

    span:last-child {
      width: 18px;
      height: 18px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .lenged {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 80px;
    margin-top: 24px;

    p {
      display: flex;
      align-items: center;
      flex: 0 0 80px;
      margin: 3px;
      font-size: 12px;

      img {
        height: 22px;
      }
    }

    > i {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 12px;
      font-style: normal;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .content {
    position: relative;
    height: calc(100% - 130px);
    padding: 0 10px;
    .chart {
      width: 100%;
      height: 220px;
    }

    .bottom {
      position: absolute;
      bottom: 25px;
      left: 0;
      width: 100%;
      display: flex;
      padding: 0 20px;
      align-items: center;
      justify-content: space-between;
      font-family: YouSheBiaoTiHei;
    }

    .distance {
      position: absolute;
      bottom: 10px;
      right: 20px;
      font-size: 12px;
      font-style: normal;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>
